import './parking_record.scss'

import { useState, useEffect, useRef } from 'react';
import { Form, Input, Select, Message, Button, Space, Table, DatePicker } from '@arco-design/web-react';

// 接口
import { getPass, getParking, searchConditional, getList, addBlackName } from '../../../../../utils/api'

const ParkingRecord = ()=>{
    //Form
    const FormItem = Form.Item;

    const formRef = useRef();
    //---选择框

    //停车场
    const [parking_lot_options,setParkingLotOptions] = useState([]);
    //进场通道
    const [approach_channel_options,setApproachChannelOptions] = useState([]);

    // 表单数据
    const [searchData,setSearchData] = useState([])

    const onValuesChange = (changeValue, values) => {
        console.log('onValuesChange: ', values);
        setSearchData(values)
    };

    //---表格
    const columns = [
        {
            title: '车牌号码',
            dataIndex: 'carNum',
        },
        {
            title: '停车场',
            dataIndex: 'parkingName',
            sorter: (a, b) => a.parkingName.length - b.parkingName.length,
        },
        {
            title: '进场通道',
            dataIndex: 'passName',
        },
        {
            title: '进场时间',
            dataIndex: 'entryTime',
        },
        {
            title: '车位信息',
            dataIndex: 'parkingPalaceNum',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (col,record) => (
                <>
                    <Button onClick={() => myAddBlackName(record)} type='text' status='success'>
                        添加到黑名单
                    </Button>
                    <Button onClick={() => myAddWhiteName(record)} type='text' status='success'>
                        白名单
                    </Button>
                </>
            ),
        },
    ];

    //表格数据
    const [data, setData] = useState([]);

    //车牌号码选择框
    const [type] = useState('checkbox');
    const [selectedRowKeys, setSelectedRowKeys] = useState(['川A6666']);

    // 添加黑白名单
    const [carNum,setCarNum] = useState()
    function myAddBlackName(record){
        let myCarNum = record.carNum
        console.log('选择车牌号',record);
        setCarNum(myCarNum)
        addBlackName({
            status:1,
            carNum
        }).then(res => {
            console.log('添加黑白名单',res);
            if(res.code === 200){
                // alert('修改成功')
            }
        })
    }
    function myAddWhiteName(record){
        let myCarNum = record.carNum
        console.log('选择车牌号',myCarNum);
        setCarNum(myCarNum)
        addBlackName({
            status:-1,
            carNum
        }).then(res => {
            console.log('添加黑白名单',res);
            if(res.code === 200){
                // alert('修改成功')
            }
        })
    }

    //分页器
    const [pagination, setPagination] = useState({
        showTotal: true,
        total: 5,
        pageSize: 2,
        current: 1,
        pageSizeChangeResetCurrent: true,
    });
    
    const [loading, setLoading] = useState(false);
    
    function onChangeTable(pagination) {
        const { current, pageSize } = pagination;
        setLoading(true);
        setTimeout(() => {
            setData(data.slice((current - 1) * pageSize, current * pageSize));
            setPagination((pagination) => ({ ...pagination, current, pageSize }));
            setLoading(false);
        }, 900);
    }

    // ---------------------------------请求
    // 停车场下拉框
    const getParkingLotOptions = () => {
        getParking().then(res => {
            console.log('停车场下拉框',res.result);
            setParkingLotOptions(res.result)
        })
    }

    // 进场通道下拉框
    const getApproachChannelOptions = () => {
        getPass(
            {
                parkingId:1
            }
        ).then(res => {
            console.log('进场通道下拉框',res.result);
            setApproachChannelOptions(res.result)
        })
    }

    // 场内停车记录列表
    const getParkingRecordList = () => {
        getList().then(res => {
            console.log('场内停车记录列表',res.result);
            setData(res.result)
        })
    }

    // 条件查询场内停车记录报表
    const searchBtn = () => {
        console.log('查询传后端数据:',searchData);
        searchConditional(searchData).then(res => {
            console.log('多条件查询场内停车记录报表',res.result);
            setData(res.result)
        })
    }

    useEffect(()=>{
        getParkingLotOptions()
        getApproachChannelOptions()
        getParkingRecordList()
    },[])
    
    return (
     <div className='parking_record'>
        <Form 
            ref={formRef}
            layout='inline' 
            className='parking_record_form' 
            onValuesChange={onValuesChange}
            
        >
            <FormItem label='车牌号码' field='carNum'>
                <Input 
                    placeholder='请输入'
                    allowClear
                    style={{ width: 90 }}
                />
            </FormItem>

            <FormItem label='进场通道' field='passName'>
                <Select
                    placeholder='请选择'
                    style={{ width: 90 }}
                    onChange={(value) =>
                        Message.info({
                            content: `You select ${value}.`,
                            showIcon: true,
                        })
                    }
                    options={approach_channel_options}
                >
                </Select>
            </FormItem>

            <FormItem label='停车场' field='parkingId'>
                <Select
                    placeholder='请选择'
                    style={{ width: 90 }}
                    onChange={(value) =>
                        Message.info({
                            content: `You select ${value}.`,
                            showIcon: true,
                        })
                    }
                    options={parking_lot_options}
                >
                </Select>
            </FormItem>

            <FormItem label='车位信息' field='parkingPalaceNum'>
                <Input 
                    placeholder='请输入'
                    allowClear
                    style={{ width: 90 }}
                />
            </FormItem>

            <FormItem label='进场时间' field='entryTime'>
                <DatePicker
                    style={{ width: 90 }}
                    showTime
                />
            </FormItem>

            {/* 查询重置 */}
            <FormItem>
                <Space>
                    <Button 
                        type='primary' 
                        onClick={searchBtn}
                    >
                        查询
                    </Button>
                    <Button type='primary' >重置</Button>      
                </Space>
            </FormItem>

            {/* 导出 */}
            <FormItem className='parking_record_form_export'>
                <Space>
                    <Button type='outline'>导出所选</Button>
                    <Button type='outline'>导出全部</Button>      
                </Space>
            </FormItem>

        </Form>

        <div className='parking_record_table'>
            <Table 
                columns={columns}
                data={data} 
                rowKey='parkRecordId' 
                rowSelection={{
                    type,
                    selectedRowKeys,
                    onChange: (selectedRowKeys, selectedRows) => {
                        console.log('onChange:', selectedRowKeys, selectedRows);
                        setSelectedRowKeys(selectedRowKeys);
                    },
                    onSelect: (selected, record, selectedRows) => {
                        console.log('onSelect:', selected, record, selectedRows);
                    },
                    checkboxProps: (record) => {
                        return {
                        disabled: record.id === '4',
                        };
                    },
                }}
                loading={loading}
                pagination={pagination}
                onChange={onChangeTable}
                renderPagination={(paginationNode) => (
                    <div
                      style={{
                        display: 'flex',
                        justifyContent: 'flex-end',
                        marginTop: 10,
                      }}
                    >
                      {paginationNode}
                    </div>
                )}
            />
        </div>
     </div>
    )
}

export default ParkingRecord